<!DOCTYPE HTML>
<html>
<head>
    <title>删除节点复制节点等操作</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <script src="jquery-1.8.0.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        //remove方法删除节点
        //var $li=$("ul li:eq(1)").remove();//获取第二个li元素节点，并删除它
       // $li.appendTo("ul"); //把刚才删除的节点又重新添加到ul

        //也可以直接使用appendto方法的特性来简化以上代码

        // $("ul li:eq(1)").appendTo("ul");//此方法也用来移动元素，移动元素时首先从文档上删除此元素，然后将该元素插入到文档中的指定位置


        //remove方法也可以通过传递参数来选择性删除元素
        //  $("ul li").remove("li[title!=苹果]");//把title不等于苹果的元素删除

        //empty方法并不是删除节点，而是清空节点它能清空元素中的所有后代节点
         //$("ul li:eq(1)").empty();//获取第二个li节点，清空此元素里的内容注意是元素里  "."仍然在

        //复制节点:clone方法
       /* $("ul li").click(function () {
            $(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到ul元素中
            //$(this).clone(true).appendTo("ul"); //复制当前单击的节点，并将它追加到ul元素   指定为true时，副本也可再次被复制
        });*/

        //替换节点:replaceWith() 和replaceAll()
        //replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素, repalceAll方法反过来用就可以
        //把<p>内的内容换成<strong>您最不喜欢的水果是
       // $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
        //或者如下
        $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
        //注意，如果在替换之前已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件






    });
</script>
</head>

<body>
<p title="选择你喜欢的水果.">你最喜欢的水果是?</p>
    <ul>
        <li title="苹果">苹果</li>
        <li title="芒果">芒果</li>
        <li title="枇杷">枇杷</li>
        <li title="菠萝">菠萝</li>
    </ul>
</body>
</html>